<template>
  <div class="h-100 ">
    <!-- 头部 开始 -->
    <my-header />
    <!-- 头部 结束 -->
    <!-- 监测 开始 -->
    <div class="h-89  ">
      <div style="width:20%;height:100%" class="f-l">
        <div class="card " style="width:100%">
          <img src="~@/assets/img/left.png" style="vertical-align: middle; padding-bottom:6px" alt=""> <span class="myfont">企业环境监测</span>
        </div>
        <div class="item-list" style="width:100%;height: calc(100% - 75px);">
          <div v-for="(items, index) in itemlist" :key="index" class="item" style="" @click="getAnnualStatistics(items)">
            <div v-if="items.code == '' || items.code == null" class="item" style="opacity:0.5">{{ items.name }}</div>
            <div v-else class="item pointer" :class="typeCode == items.code ? 'checked' : ''">{{ items.name }}</div>
          </div>
        </div>
      </div>
      <div class="chart-box f-r" style="width:78%;height:100%">
        <div data-bottom class="timer flex flex-center">
          <span>2021-11-06</span>
          <img src="../../../assets/img/bottom.png" alt="">
        </div>
        <div style="width:100%;height:30%;margin-bottom:2%" class="boxbg">
          <div class=" title" style="width:100%; padding:0 20px">
            奶山羊生长情况监测
          </div>
          <div class="flex is-justify-space-around" style="height:70%">
            <div class="chart">
              <v-chart :options="optionZzygk" />
            </div>
            <div class="chart">
              <v-chart :options="optionZzygk" />
            </div>
            <div class="chart">
              <v-chart :options="optionZzygk" />
            </div>
            <div class="chart">
              <v-chart :options="optionZzygk" />
            </div>

          </div>
        </div>
        <div style="width:100%;height:20%;margin-bottom:2%" class="boxbg">
          <div class=" title" style="width:100%; padding:0 20px">
            羊舍空气质量
          </div>
          <div class="flex tabs" style="height:60%">
            <div class="tab ">
              <img src="@/assets/sheep/tab1.png" alt="">
              <div class="tab-html  ">
                <div>温度</div>
                <div class="flex">
                  <span> 12.39</span> <small>℃</small>
                </div>
              </div>
            </div>
            <div class="tiao" />

            <div class="tab ">
              <img src="@/assets/sheep/tab2.png" alt="">
              <div class="tab-html  ">
                <div>湿度</div>
                <div class="flex">
                  <span> 12.39</span> <small>℃</small>
                </div>
              </div>
            </div>
            <div class="tiao" />

            <div class="tab ">
              <img src="@/assets/sheep/tab3.png" alt="">
              <div class="tab-html  ">
                <div>光照</div>
                <div class="flex">
                  <span> 12.39</span> <small>℃</small>
                </div>
              </div>
            </div>
            <div class="tiao" />
            <div class="tab ">
              <img src="@/assets/sheep/tab4.png" alt="">
              <div class="tab-html  ">
                <div>二氧化碳</div>
                <div class="flex">
                  <span> 12.39</span> <small>℃</small>
                </div>
              </div>
            </div>
            <div class="tiao" />
            <div class="tab ">
              <img src="@/assets/sheep/tab5.png" alt="">
              <div class="tab-html  ">
                <div>氧气</div>
                <div class="flex">
                  <span> 12.39</span> <small>℃</small>
                </div>
              </div>
            </div>
            <div class="tiao" />
            <div class="tab ">
              <img src="@/assets/sheep/tab6.png" alt="">
              <div class="tab-html  ">
                <div>硫化氢</div>
                <div class="flex">
                  <span> 12.39</span> <small>℃</small>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div style="width:100%;height:39.2%;" class="boxbg">
          <div class=" title" style="width:100%; padding:0 20px">
            羊舍监控画面
          </div>
          <div class="kong">
            <img src="@/assets/sheep/wu.png" alt="">

          </div>
        </div>
      </div>

    </div>
    <!-- 监测 结束 -->

  </div>
</template>

<script>
import echarts from 'echarts'
import MyHeader from '@/views/component/MyHeader.vue'

export default {
  name: 'Detection',
  components: {
    MyHeader
  },
  data() {
    return {
      typeCode: '',
      itemlist: [
        { name: '和氏高寒川牧业有限公司', code: 100 },
        { name: '陇县海东旺养殖农业专业合作社', code: 100 },
        { name: '陕西宝泰良种繁育有限公司', code: 100 },
        { name: 'XXXX企业环境监测XXXXX', code: 100 }
      ],
      optionZzygk: {
        isShow: true,
        title: [
          {
            text: '18',
            left: 'center',
            top: '40%',
            textStyle: {
              color: '#fff',
              fontSize: 20
            }
          },
          {
            id: 'statistic',
            text: '智能耳标',
            left: 'center',
            top: '50%',
            textStyle: {
              color: '#3CB5FF',
              fontSize: 12
            }
          }
        ],
        tooltip: {
          trigger: 'item',
          formatter: '{b}: {c}亩({d}%)',
          confine: true
        },
        series: [
          {
            center: ['50%', '50%'],
            type: 'pie',
            radius: ['48%', '70%'],
            avoidLabelOverlap: false,
            label: {
              show: false,
              position: 'center'

            },
            labelLine: {
              show: true
            },
            data: [
              { value: 1048, name: 'Search Engine' },
              { value: 735, name: 'Direct' }

            ]
          }
        ]
      }
    }
  },
  created() {
  },
  methods: {

  }
}
</script>

<style lang="scss" scoped>
// 环境监测css
.kong{
  height: 40%;
  display: flex;
  align-items: center;
  justify-content: center;
  img{

  }
}
.tabs{
    align-items: center;
    padding:0 2%;
    box-sizing: border-box;
    justify-content: space-around;
  }
.tab{
  align-items: center;
  height: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  img{

    margin-right: 5%;
  }

  .tab-html{
    display: flex;
    flex-direction: column;
    div{

      small{
        font-size: 14px;
        height: 25px;
      }
    }
    div:last-child{
      display: flex;
        align-items: flex-end;
         color: #3CB5FF;
      line-height: 34px;
      text-shadow: 0px 1px 12px rgba(6, 80, 184, 0.41);
      background: linear-gradient(180deg, #FFFFFF 0%, #3CB5FF 100%);
        -webkit-background-clip: text;
        font-size: 32px;
      font-family: PingFangSC-Medium, PingFang SC;
      font-weight: 600;
      -webkit-text-fill-color: transparent;
    }
    div:first-child{

      color: #ffffff;
      font-size: 14px;
    }
  }
}
.tiao{
  width: 2px;
height: 64px;
margin: 0 3% ;
background: linear-gradient(180deg, rgba(56, 123, 164, 0) 0%, #387BA4 51%, rgba(56, 123, 164, 0) 100%);
}
div[data-bottom] {
  background: url(~@/assets/img/gradients-left.png) no-repeat;
  background-size: 100% 100% !important;
}
.boxbg {
  background: url(~@/assets/img/currency-box.png) no-repeat;
  background-size: 100% 100% !important;
}
.timer {
  width: 20%;
  height: 6%;
  color: #ffffff;
  img {
    width: 20%;
    height: 60%;
    margin-left: 10px;
  }
}
.tab {

}
.flex-center{
  justify-content: center;
  align-items: center;
}
.item-list {
  // max-height: 86.4%;
  border: 1px solid #155277;
  overflow: auto;
  scroll-behavior: smooth;
}

.item-list::-webkit-scrollbar {
  /*滚动条整体样式*/
  width: 10px; /*高宽分别对应横竖滚动条的尺寸*/
  height: 1px;
}
.item-list::-webkit-scrollbar-thumb {
  /*滚动条里面小方块*/
  border-radius: 10px;
  background-color: #4e5b65;
  // background-image: -webkit-linear-gradient(
  //   45deg,
  //   rgba(255, 255, 255, 0.2) 25%,
  //   transparent 25%,
  //   transparent 50%,
  //   rgba(255, 255, 255, 0.2) 50%,
  //   rgba(255, 255, 255, 0.2) 75%,
  //   transparent 75%,
  //   transparent
  // );
}
.item-list::-webkit-scrollbar-track {
  /*滚动条里面轨道*/
  box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
  // background: #1a5a7d;
  border-radius: 10px;
}
.h-89{
  height: 89vh;
  position: absolute;
  width: 98vw;
  top: 9%;
  margin: 0 1%;
}
.item {
  border-bottom: 1px solid #155277;
  background: rgba(19, 34, 53, 0.8);
}

.checked {
  background: #192f4b;
  border: solid 1px #155277;
}

.app-container {
  width: 100%;
  height: 100%;
}
.echarts {
  width: 100%;
  height: 100%;
}
.chart{
  width: 30%;
  height: 100%;
}
.chart-box {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  margin-left: 2%;
  box-sizing: border-box;
}

.item-list .item {
  width: 100%;
  text-align: center;
  height: 68px;
  line-height: 68px;
  color: #fff;
}
.title {
  font-size: 20px;
  font-family: PingFangSC-Medium, PingFang SC;
  font-weight: 600;
  height: 50px;
  line-height: 50px;
  color: rgba(255, 255, 255, 1);
}

.myfont {
  font-family: myfont;
  font-size: 24px;
  background-image: -webkit-linear-gradient(bottom, #082942, #dff5fe, #ffffff);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  z-index: 999;
}
.f-l {
  float: left;
}
.f-r {
  float: right;
}
.card {
  height: 75px;
  line-height: 75px;
  text-align: center;
  font-family: myfont;
  background: url(~@/assets/img/card.png) no-repeat;
  background-size: 100% 100%;
  color: rgba(255, 255, 255, 1);
}
.el-input__inner {
  background-color: #1b2b4c;
  border: 1px solid #26455f;
}
.el-radio__inner {
  background: #153155;
}
.el-radio {
  color: #fff;
}
.el-radio__input.is-checked .el-radio__inner {
  background: #153155;
  color: #ffffff !important;
}
input {
  -webkit-text-fill-color: #fff;
}
.f-40 {
  padding-left: 24px;
  font-size: 40px;
  color: #30616e;
  float: left;
}
.el-select-dropdown {
  background-color: #2a436a;
  color: #ffffff;
}
.el-select-dropdown__item.hover {
  background-color: #1e365a;
  color: #ffffff;
}
.el-select-dropdown__item.selected {
  color: #ffffff;
}
.el-select-dropdown__item {
  color: #ffffff;
}
.el-select-dropdown{
  border: 0;
}
.el-popper[x-placement^=bottom] .popper__arrow::after{
  border-bottom-color: #2a436a;
  top: 0px;
}

</style>
